<template>
  <div>
    <!-- <div class="header">
      <div class="header-left">
        <div class="title"><Q>Q我吧</Q></div>
      </div>
    </div> -->
    <div class="container">
      <el-container>
        <el-aside
          style="
            font-size: 30px;
            background-color: #d7ecff;
            opacity: 0.7;
            width: 16%;
            padding-top: 50px;
          "
        >
          <div class="header-dropdown">
            <img :src="user.avatar" alt="" />
            <div style="margin-left: 10px">
              <span style="text-align: center">{{ user.name }}</span>
            </div>
          </div>
          <el-menu
            :default-active="$route.path"
            :default-openeds="[1]"
            router
            background-color="#D7ECFF"
            text-color="#000000"
            active-text-color="#00a3af"
          >
            <el-menu-item-group>
              <el-menu-item index="/message">
                <span slot="title"><i class="iconfont icon-zuijin"></i></span>
              </el-menu-item>
              <el-menu-item index="/imSingle">
                <span slot="title"
                  ><i class="iconfont icon-zujian-lianxiren"></i
                ></span>
              </el-menu-item>
              <el-menu-item index="/imGroup">
                <span slot="title"
                  ><i class="iconfont icon-zuijinxiaoxi"></i
                ></span>
              </el-menu-item>
              <el-menu-item index="/person">
                <span slot="title"
                  ><i class="iconfont icon-gerenzhongxin1"></i
                ></span>
              </el-menu-item>
              <el-menu-item index="/password">
                <span slot="title"
                  ><i class="iconfont icon-xiugaimima"></i
                ></span>
              </el-menu-item>
              <el-menu-item>
                <span @click="logout"
                  ><i class="iconfont icon-tuichudenglu1"></i
                ></span>
              </el-menu-item>
              <el-menu-item index="/user" v-if="user.role === 'ADMIN'">
                <span slot="title"
                  ><i class="iconfont icon-yonghuguanli"></i
                ></span>
              </el-menu-item>
            </el-menu-item-group>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
export default {
  name: "Layout",

  data() {
    return {
      user: localStorage.getItem("user")
        ? JSON.parse(localStorage.getItem("user"))
        : {},
    };
  },

  mounted() {
    this.$bus.$on("updateAvatar", (avatar) => {
      this.user.avatar = avatar;
      localStorage.setItem("user", JSON.stringify(this.user));
    });
  },

  methods: {
    logout() {
      localStorage.removeItem("user");
      this.$router.push("/login");
    },
  },
};
</script>

<style scoped>
.el-menu {
  border-right: none !important;
  font: 2em sans-serif;
}
.el-main {
  height: 630px;
  padding: 0;
  background-color: #f5faff;
}

.header-dropdown {
  width: 80px;
  height: 130px;
  margin-left: 31%;
  font: 0.7em sans-serif;
  /* display: flex;
  align-items: center;
  justify-content: right; */
}
.el-dropdown-menu {
  text-align: center !important;
}
.header-dropdown img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

i {
  margin-left: 33%;
  font-size: 30px;
}
</style>
